<template>
    <div class="role-list">
        <div class="condition">
            <el-input v-model="role.roleCode" placeholder="角色编码" class="condition-input"></el-input>
            <el-input v-model="role.roleName" placeholder="角色名称" class="condition-input"></el-input>
            <el-select v-model="role.isSystem" placeholder="是否系统角色" class="condition-input">
                <el-option v-for="item in isSystemItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="role.roleType" placeholder="角色类型" class="condition-input">
                <el-option v-for="item in roleTypeItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-tooltip content="按条件查询"><el-button type="primary" class="sub-query" @click="queryCondition(false)">查询</el-button></el-tooltip>
            <el-tooltip content="清空条件"><el-button type="default" class="sub-query" @click="clearCondition">清空</el-button></el-tooltip>
            <el-tooltip content="新增数据"><el-button type="primary" @click="openAddBox"><i class="el-icon-plus"></i>新增</el-button></el-tooltip>
        </div>

        <el-table v-loading="loading" :data="listData" stripe border style="width: 98%;margin-left: 1%;margin-top: 15px"  :cell-style="rowClass" :header-cell-style="headClass">
            <el-table-column type="index" :index="indexMethod"> </el-table-column>
            <el-table-column prop="roleCode" label="角色编码" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="isSystem" label="是否系统角色" width="140" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.isSystem=='1'">系统角色</span>
                    <span v-if="scope.row.isSystem=='2'">普通角色</span>
                </template>
            </el-table-column>
            <el-table-column prop="roleType" label="角色类型" width="120" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.roleType=='1'">普通角色</span>
                    <span v-if="scope.row.roleType=='2'">普通管理员</span>
                    <span v-if="scope.row.roleType=='3'">超级管理员</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="140" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.status=='1'" style="color: green">正常</span>
                    <span v-if="scope.row.status=='2'" style="color: red">停用</span>
                </template>
            </el-table-column>
            <el-table-column prop="createBy" label="创建者" width="140" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="createDate" label="创建时间" width="140" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="remarks" label="备注" width="250" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="sort" label="排序" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="sort" label="分配用户" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span @click="roleUserFun(scope.row.roleCode)"><el-tooltip content="给该角色分配用户"><i class="el-icon-s-fold"></i></el-tooltip></span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200" style="text-align: center">
                <template slot-scope="scope">
                    <el-tooltip content="编辑"><el-button circle size="mini" type="primary" plain @click="openUpdateBox(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button></el-tooltip>
                    <el-tooltip content="启用" v-if="scope.row.status=='2'"><el-button circle size="mini" type="primary" plain @click="openTips(scope.$index,scope.row.id,1)"><i class="el-icon-circle-check"></i></el-button></el-tooltip>
                    <el-tooltip content="停用" v-if="scope.row.status=='1'"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,2)"><i class="el-icon-circle-close"></i></el-button></el-tooltip>
                    <el-tooltip content="删除"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,3)"><i class="el-icon-delete"></i></el-button></el-tooltip>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="操作提示" :visible.sync="updateStatus.tipsBox" width="30%">
            <span v-if="updateStatus.status == '1'">是否确认启用此条数据？</span>
            <span v-if="updateStatus.status == '2'">是否确认停用此条数据？</span>
            <span v-if="updateStatus.status == '3'">是否确认删除此条数据？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateStatus.tipsBox=false">取 消</el-button>
                <el-button type="primary"  @click="saveStatus()">确 定</el-button>
            </span>
        </el-dialog>


        <el-dialog title="编辑数据" :visible.sync="editItemData.editDataBox" width="70%" v-if="editItemData.editDataBox"><!--关闭窗口时v-if及时销毁组件-->
            <role-form :editItemData="editItemData.rowData" @onAddSuccess="onAddSuccess" @onUpdateSuccess="onUpdateSuccess" @editDataBoxClose="editItemData.editDataBox = false"/>
        </el-dialog>


        <div class="block">
            <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange"
                           :current-page="this.role.pageNo"
                           :page-sizes="[10, 20, 40, 60]"
                           :page-size="this.role.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="this.role.total">
            </el-pagination>
        </div>

        <!--分配用户角色-->
        <el-drawer title="分配用户角色" :visible.sync="drawerBox" direction="rtl" size="50%">
            <role-user-list @drawerBoxClose="drawerBoxClose" :drawerRoleCode="drawerRoleCode"/>
        </el-drawer>

    </div>
</template>

<script>
    import roleApi from '@/api/role/roleApi'
    import roleForm from "./RoleForm";
    import roleUserList from "./RoleUserList"
    export default {
        name: "RoleList",
        components:{
            roleForm,
            roleUserList
        },
        data(){
            return{
                drawerBox:false,
                drawerRoleCode:'',
                loading:true,  //请求加载
                updateStatus:{  //修改状态
                    tipsBox:false,
                    index:'',
                    id:'',
                    status:'',
                },
                editItemData:{ // 添加或编辑
                    index:'',
                    rowData:'',
                    editDataBox:false,
                },
                listData:[],  //表格数据
                role:{  //查询条件
                    id:'',
                    roleCode:'',
                    roleName:'',
                    isSystem:'',
                    roleType:'',
                    sort:'',
                    status: '',
                    pageNo:1,
                    pageSize:20,
                    total:0,
                },
                isSystemItem:[{value:"1",label:"系统角色"},{value:"2",label:"普通角色"}],
                roleTypeItem:[{value:'1',label:'普通角色'},{value:'2',label:'普通管理员'},{value:'3',label:'超级管理员'}]
            }
        },
        methods:{
            drawerBoxClose(res){
                this.drawerBox = res
            },
            roleUserFun(roleCode){
                this.drawerRoleCode = roleCode;
                this.drawerBox = true;
            },
            indexMethod(i){
                return i+1
            },
            headClass () {
                return 'text-align: center;background:#eef1f6;'
            },
            rowClass () {
                return 'text-align: center;'
            },
            async pageSizeChange(val){
                this.role.pageSize = val
                this.queryCondition(true);
            },
            async pageNoChange(val){
                this.role.pageNo = val
                this.queryCondition(true);
            },
            async queryCondition(isPage){
                if (!isPage){
                    this.role.pageNo=1
                }
                this.loading = true
                const res = await roleApi.getList(this.role)
                if (res.code == '200'){
                    this.role.total = res.data.total
                    this.listData = res.data.records
                    this.loading = false;
                }else{
                    this.$message.error(res.msg)
                }
            },
            openTips(index,id,status){
                this.updateStatus.index = index
                this.updateStatus.id = id
                this.updateStatus.status = status
                this.updateStatus.tipsBox = true
            },
            openUpdateBox(index,row){
                this.editItemData.index = index
                this.editItemData.rowData = row
                this.editItemData.editDataBox = true
            },
            openAddBox(){
                this.editItemData.index = ''
                this.editItemData.rowData = ''
                this.editItemData.editDataBox = true
            },
            async saveStatus(){
                this.updateStatus.tipsBox=false
                const res = await roleApi.saveStatus(this.updateStatus.id,this.updateStatus.status)
                if (res.code == '200'){
                    this.$message.success("操作成功")
                    if (this.updateStatus.status == '1'){
                        this.listData[this.updateStatus.index].status = 1
                    }
                    if (this.updateStatus.status == '2'){
                        this.listData[this.updateStatus.index].status = 2
                    }
                    if (this.updateStatus.status == '3'){
                        this.listData.splice(this.updateStatus.index,1)
                    }
                }
            },
            onUpdateSuccess(res){
                this.listData[this.editItemData.index] = res
                this.editItemData.editDataBox = false;
                this.$message.success("保存成功")
            },
            onAddSuccess(res){
                if (this.listData.length < this.role.pageSize){
                    this.listData.splice(0,0,res)
                    this.role.total=this.role.total+1
                }
                this.editItemData.editDataBox = false;
                this.$message.success("保存成功")
            },
            clearCondition(){
                this.role.roleCode='';
                this.role.roleName='';
                this.role.isSystem='';
                this.role.roleType='';
            }
        },
        created:async function (){
            const res = await roleApi.getList(this.role)
            if (res.code == '200'){
                this.role.total = res.data.total
                this.listData = res.data.records
                this.loading = false;
            }else{
                this.$message.error(res.msg)
            }
        }
    }
</script>

<style scoped>
    .el-icon-s-fold{
        color: green;
        cursor: pointer;
    }
</style>